App.require(function () {
    var app = App.getCurrent();

    app.definePage("strdaterangetimeselect", {
        getDomObj: function () {
            this.attachDom(".time-container", "timeContainer")
                .attachDom(".hour-minute-container", "itemContainer")
                .attachEvent("timeContainer", "touchstart", this.touchStartHandler, false)
                .attachEvent("timeContainer", "touchmove", this.touchmoveHandler, false)
                .attachEvent("timeContainer", "touchend", this.touchendHandler, false)
                .attachEvent("timeContainer", "click", this.clickContainerHandler, false);
        },
        touchmoveByTouch: function (touch, isChange) {
            itemContainer = this.domList.itemContainer,
                rect = itemContainer.getBoundingClientRect(),
                centerX = rect.left + rect.width / 2,
                centerY = rect.top + rect.height / 2;

            var radius = Math.sqrt(Math.pow(touch.clientX - centerX, 2)+ Math.pow(touch.clientY - centerY, 2));
            var angle = Math.atan2(touch.clientY - centerY, touch.clientX - centerX) * 180 / Math.PI;
            if (angle < -90) angle += 360;
            
            if (this.data.state === "hour") {
                var index = parseInt((90 + angle) / 30);
                if (radius < 90) {
                    if (index == 0) this.clickTarget(this.domList.itemContainer.lastElementChild, !isChange);
                    else this.clickTarget(this.domList.itemContainer.children[12 + index - 1], !isChange);
                }
                else {
                    if (index == 0) this.clickTarget(this.domList.itemContainer.children[11], !isChange);
                    else this.clickTarget(this.domList.itemContainer.children[index - 1], !isChange);
                }
            }
            else {
                var index = parseInt((90 + angle) / 6);
                if (index == 0) this.clickTarget(this.domList.itemContainer.lastElementChild, !isChange);
                else this.clickTarget(this.domList.itemContainer.children[index - 1], !isChange);
            }
        },
        touchendHandler: function (ev) {
            if (ev.touches.length > 1 || !this.data.touched) return;
            var touch = ev.changedTouches[0];
            this.touchmoveByTouch(touch, true);
            this.data.touched = false;
        },
        touchStartHandler: function (ev) {
            if (ev.touches.length > 1) return;
            this.data.touched = true;
        },
        touchmoveHandler: function (ev) {
            ev.preventDefault();
            ev.stopPropagation();
            if (ev.touches.length > 1 || !this.data.touched) return;
            var touch = ev.changedTouches[0];
            this.touchmoveByTouch(touch);
                
        },
        clickTarget: function (li, isChange) {
            if (li && li.dataset.index) {
                var index = parseInt(li.dataset.index);
                this.domList.activeLi.classList.remove("active");
                li.classList.add("active");
                this.domList.activeLi = li;
                if (this.data.state === "hour") {
                    this._setAngleWidth(index);
                    this.data.yTime.hour = index == 24 ? 0 : index;
                    if (!isChange) {
                        this.data.state = "minute";
                        this.setMinuteStyle();
                    }
                    this.parent.staticPage.setTimeLayout(this.data.isStart);
                } else {
                    var container = this.domList.itemContainer;
                    this.data.yTime.minute = parseInt(index);
                    container.style.setProperty("--rotate-angle", "rotate(" + ( -90 + this.data.yTime.minute * 6) + "deg)");
                    container.style.setProperty("--point-width", (120 - 10) + "px");
                    this.parent.staticPage.setTimeLayout(this.data.isStart);
                    if (!isChange) this.parent.render("strdateRangePickerActive", true);
                }
            }
        },
        clickContainerHandler: function (ev) {
            var target = ev.target,
                li = Component.getNodeName(target, "LI");
            this.clickTarget(li);
           
        },
        setMinuteStyle: function () {
            var minuteList = [];
            for (var i = 1; i < 61; i++) {
                if (i % 5 == 0) {
                    var index = parseInt(i / 5);
                    var angle = this._getAngleByIndex(index),
                        reverseAngle = -angle,
                        offset = this._getWidthByIndex(index);

                    minuteList.push({
                        value: i === 60 ? 0: i,
                        content: i === 60 ? 0: i,
                        liStyle: "rotate(" + angle + "deg) translate(" + offset + "px, 0);z-index: 1; ",
                        spanStyle: "rotate(" + reverseAngle + "deg)",
                        active: this.data.yTime.minute == 0 ? i === 60 : i === this.data.yTime.minute
                    })
                } else {
                    var angle = -90 + 6 * i, offset = 120;
                    minuteList.push({
                        value: i,
                        content: "",
                        liStyle: "rotate(" + angle + "deg) translate(" + offset + "px, 0);",
                        spanStyle: "rotate(" + (-angle) + "deg);--str: '" + i + "'",
                        active: this.data.yTime.minute == 0 ? i === 60 : i === this.data.yTime.minute
                    })
                }

            }

            this.innerHTML(this.domList.itemContainer, '{{each item as list}}' +
                '<li data-index="{{item.value}}" style="transform: {{item.liStyle}}" {{if item.active}}class="active"{{/if}}><span style="transform: {{item.spanStyle}}">{{item.content}}</span></li>' +
                '{{/each}}',
                function () {
                    that.domList.activeLi = that.domList.itemContainer.querySelector("li.active");
                }, {
                    list: minuteList
                });

                var container = this.domList.itemContainer;
                container.style.setProperty("--rotate-angle", "rotate(" + ( -90 + this.data.yTime.minute * 6) + "deg)");
                container.style.setProperty("--point-width", (120 - 10) + "px");
        },
        init: function () {
            this.data.state = "hour", that = this;
            var hourList = [];
            for (var i = 1; i < 25; i++) {
                var angle = this._getAngleByIndex(i),
                    reverseAngle = -angle,
                    offset = this._getWidthByIndex(i);

                hourList.push({
                    value: i,
                    content: i == 24 ? "00" : i,
                    liStyle: "rotate(" + angle + "deg) translate(" + offset + "px, 0)",
                    spanStyle: "rotate(" + reverseAngle + "deg)",
                    active: this.data.yTime.hour == 0 ? i === 24 : i === this.data.yTime.hour
                })
            }
            this.innerHTML(this.domList.itemContainer, '{{each item as list}}' +
                '<li data-index="{{item.value}}" style="transform: {{item.liStyle}}" {{if item.active}}class="active"{{/if}}><span style="transform: {{item.spanStyle}}">{{item.content}}</span></li>' +
                '{{/each}}',
                function () {
                    that.domList.activeLi = that.domList.itemContainer.querySelector("li.active");
                }, {
                    list: hourList
                });
            this._setAngleWidth(this.data.yTime.hour);
        },
        _setAngleWidth: function (index) {
            var container = this.domList.itemContainer;
            container.style.setProperty("--rotate-angle", "rotate(" + this._getAngleByIndex(index) + "deg)");
            container.style.setProperty("--point-width", (this._getWidthByIndex(index) - 10) + "px");
        },
        _getWidthByIndex: function (i) {
            if (i == 0) return 80;
            return i > 12 ? 80 : 120;
        },
        _getAngleByIndex: function (i) {
            return -90 + (i > 12 ? i - 12 : i) * 30
        },
        render: function (next) {
            var data = this.data,
                parentDate = this.parent.data;
            data.yTime = data.isStart ? parentDate.startTime : parentDate.endTime;

            this.fetch("./index.html", function (html) {
                next(html);
            })
        },
        selectDate: function () {
            this.parent.render("strdateRangePickerActive", true);
        }
    })
});